<template>
  <!-- 查询行 -->
  <p class="You">
    <label for="">秒杀编号</label>
    <input type="text" placeholder="全部订单" />
    <label for="">秒杀名称</label>
    <input type="text" />
    <button>重置</button>
    <button @click="addGoods">新增商品</button>
    <button>确定</button>
  </p>
  <!-- 蓝色标题行 -->
  <div class="MStitle">
    <span class="MSid">秒杀编号</span>
    <span class="name">秒杀名称</span>
    <span class="goods">关联商品</span>
    <span class="startTime">活动开始时间</span>
    <span class="endTime">活动结束时间</span>
    <span class="MSprice">秒杀价格</span>
    <span class="XJprice">现价</span>
    <span class="num">数量</span>
  </div>
  <!-- 渲染数据 -->
  <div v-for="item in listAdd" :key="item.goodsId">
    <div
      class="titleActive"
      :class="Number(item.goodsId) % 2 !== 0 ? 'active1' : 'active2'"
      @click="handelClick(item.goodsId)"
    >
      <!-- 商品Id -->
      <span>{{ item.goodsId }}</span>
      <!-- 商品名称 -->
      <span>{{ item.goodsName }}</span>
      <!-- 关联商品 -->
      <span>{{ item.goodsClass }}</span>
      <!-- 活动开始时间 -->
      <span>{{ item.created }}</span>
      <!-- 活动结束时间 -->
      <span>{{ item.createdend }}</span>
      <!-- 秒杀价格 -->
      <span>{{ item.goodsSale1 }}</span>
      <!-- 现价 -->
      <span>{{ item.goodsSale2 }}</span>
      <!-- 数量 -->
      <span>{{ item.goodsSale3 }}</span>
    </div>
  </div>
  <!-- 分页 -->
  <div class="pages">
    <el-pagination
      small
      background
      layout="prev, pager, next"
      class="mt-4"
      :total="110"
      @current-change="fn"
    ></el-pagination>
  </div>
</template>

<script lang="ts">
import { ref, onMounted } from "@vue/runtime-core";
import { useRouter } from "vue-router";

import data from "@/mock/CxData";
export default {
  setup() {
    const listAdd = ref([]);
    const goodsId = ref("");

    const page = ref(1);
    const size = ref(8);

    // 页面跳转
    const router = useRouter();
    const addGoods = () => {
      router.push("/home/cxgl/ms");
    };

    // 请求数据
    onMounted(async () => {
      const res: any = await data.getData();
      console.log(res);

      listAdd.value = res.result.data;
    });

    // 点击分页
    const fn = async (index: number) => {
      page.value = index;
      const list: any = await data.pageData({
        page: page.value,
        size: size.value,
      });
      listAdd.value = list.result;
    };

    //请求数据
    onMounted(async () => {
      const list: any = await data.pageData({
        page: page.value,
        size: size.value,
      });
      listAdd.value = list.result;
    });
    //点击切换背景色
    const handelClick = (item: string) => {
      goodsId.value = item;
    };
    return {
      listAdd,
      goodsId,
      handelClick,
      fn,
      page,
      size,
      addGoods,
    };
  },
};
</script>

<style lang="less" scoped>
//查询行样式
.You {
  display: flex;
  justify-content: flex-start;
  margin: 30px 0;
  label {
    font-size: 16px;
    color: #555656;
    margin-right: 15px;
    font-weight: 600;
  }
  input {
    width: 150px;
    height: 25px;
    background: #eeeeee;
    border: 0;
    margin-right: 25px;
    border-radius: 5px;
    color: #999999;
    padding-left: 5px;
  }
  button {
    width: 70px;
    height: 30px;
    background: #5f4e72;
    border-radius: 4px;
    color: white;
    border: 0;
    margin-right: 15px;
  }
  button:first-of-type {
    margin-left: 50px;
    // background: #e96c06;
  }
}
//一行标题
.MStitle {
  background: #341a76;
  color: white;
  height: 50px;
  // margin-top: 20px;
  span {
    width: 130px;
    display: inline-block;
    height: 100%;
    font-size: 14px;
    line-height: 50px;
    text-align: center;
  }
  .startTime .endTime {
    width: 150px;
  }
}
// 渲染页面
.titleActive {
  span {
    width: 130px;
    display: inline-block;
    height: 100%;
    font-size: 12px;
    line-height: 50px;
    text-align: center;
  }
}
// 换行变色
.active1 {
  background-color: #f5f5f5;
}
.active2 {
  background-color: #ffffff;
}
// 分页
.pages {
  float: right;
}
</style>
